<template>
  <div>
    <el-container direction="vertical">
      <el-header>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
          <el-menu-item
            :index="menu.path"
            v-for="(menu, index) in menuList"
            :key="menu.path"
            @click="handleSelect(menu,index)"
          >{{menu.title}}</el-menu-item>
        </el-menu>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            :router="true"
            :default-active="defaultActiveLeft"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            :default-openeds="openeds"
          >
            <SidebarItem :key="sub.path" v-for="sub in data.children" :item="sub"></SidebarItem>
          </el-menu>
        </el-aside>
        <!--右边窗口-->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import SidebarItem from '@/components/SidebarItem.vue'
export default {
  components: {
    SidebarItem
  },
  data () {
    return {
      activeIndex: '',
      menuList: [], // 顶部一级导航菜单
      defaultActiveLeft: '', // 默认激活的三级菜单id
      // linkUrl: '', // 默认激活后的三级菜单url
      data: {}, // 当前页面激活的一级菜单项
      openeds: [], // 记录要展示的二级菜单的index数组
      isCollapse: false,
      index: 0 //  当前选中的一级菜单在列表中的索引
    }
  },
  methods: {
    // 选择顶部导航菜单，联动左侧菜单
    handleSelect (menu, index) {
      // 保存到localStorage中
      localStorage.setItem('linkUrl', menu.linkUrl)
      localStorage.setItem('activeIndex', menu.path)
      localStorage.setItem('index', index)

      // 临时变量，
      const data = []
      for (var i = 0; i < menu.children.length; i++) {
        data.push(menu.children[i].path)
      }
      // 当前menu的所有子菜单id数组[2-1,2-2,...]
      // console.log(data)
      // 设置默认激活的三级菜单
      this.defaultActiveLeft = menu.children[0].children[0].path
      // 设置默认激活的当前链接
      this.linkUrl = menu.children[0].children[0].linkUrl
      this.openeds = data
      this.data = menu
    }
  },
  async created () {
    const activeIndex = localStorage.getItem('activeIndex')
    const index = localStorage.getItem('index')

    if (activeIndex == null || index == null) {
      this.index = 0
      this.activeIndex = '1'
      this.linkUrl = ''
    } else {
      // this.linkUrl = linkUrl
      this.activeIndex = activeIndex
      this.index = index
    }

    // 获取导航数据
    const { data: res } = await this.$http.get('/systems/menu/findAllMenu')
    this.menuList = res.data
    // 导航默认选择，默认显示上一次选中的一级菜单id
    this.data = res.data[this.index]

    if (this.data.children[0] !== undefined) {
      // 设置默认激活的三级菜单
      this.defaultActiveLeft = this.data.children[0].children[0].path
    }

    // 临时变量，存储了当前一级菜单的所有二级菜单的id
    const data = []
    for (let i = 0; i < this.data.children.length; i++) {
      data.push(this.data.children[i].path)
    }
    this.openeds = data
  }
}
</script>

<style scoped>
/* .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  body > .el-container {
    margin-bottom: 40px;
  }
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  } */
</style>
